<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/hui/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/hui/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/layer/formSelects/formSelects-v4.css" />
<script src="/vue/vue.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>区域管理</title>
<link rel="stylesheet" href="/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="pos-r">
<div id="app">
	<div class="page-container">
			<div class="row cl" style="height:100%">
	          	<div class="formControls col-xs-2" style="height:100%">
	          	      <ul id="deptTree" class="ztree" style="float:left"></ul>
	          	      <div style="float:right;width: 1px;height: 100%; background:#ccc5c5;"></div> 
	            </div>
	            <div class="formControls col-xs-10" style="height:100%">
					<div class="panel panel-default radius">
						<div class="panel-header">查询条件</div>
						<div class="panel-body">
							区域名称：<input type="text" class="input-text radius size-M"  v-model="search.model.areaName" style="width:250px;">
							<button class="btn btn-success radius" @click="searchData"><i class="Hui-iconfont">&#xe665;</i> 查询</button>
						</div>
					</div>
					<div class="cl pd-5 bg-1 bk-gray mt-20"> 
						<span class="l">
							<a href="javascript:;" class="btn btn-primary radius" @click="addArea">新增区域</a>
						</span>
					</div>
					<table id="tables" class="table table-border table-bordered table-bg table-hover table-sort radius">
						<thead>
							<tr class="text-c">
								<th width="40">区域代码</th>
								<th width="40">区域名称</th>
								<th width="40">区域类型</th>
								<th width="40">父级区域</th>
								<th width="40">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr class="text-c va-m" v-for="m in record" v-cloak>
								<td>{{m.id}}</td>
								<th>{{m.name}}</th>
								<td>{{dictData[m.areaType]}}</td>
								<td>{{m.parent.name}}</td>
								<td class="td-manage">
									<a style="text-decoration:none" @click="openUpdate(m)" href="javascript:;" title="修改机构"><i class="Hui-iconfont">&#xe6df;修改</i></a> 
								</td>
							</tr>
						</tbody>
					</table>
					<div class="cl pd-5 bg-1 bk-gray">
						<span class="l">共有数据：<strong v-cloak>{{page.total}}</strong> 条</span>
						<span class="r"><div id="laypage"></div></span>
					</div>
	            </div>
            </div>
		</div>
		<div id="areaDiv" v-show="false">
			<form class="form form-horizontal" id="areaForm" action="#" style="width: 400px;">
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span> 区域名称：</label>
					<div class="formControls col-xs-8">
						<input type="text" class="input-text radius size-M" id="add_name" name="add_name" v-model="selectArea.name">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span> 父级区域：</label>
					<div class="formControls col-xs-8">
						<input type="text" class="input-text radius size-M disabled" disabled="disabled" v-model="selectArea.parent.name">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span> 区域类型：</label>
					<div class="formControls col-xs-8">
						<span class="select-box" >
							<select class="select" v-model="selectArea.areaType" name="areaType"  >     
						         <option value="">请选择</option>                           
							     <option v-for="(value,key,index) in dictData"  :value="key" >{{value}}</option>                                
							</select>
						</span>
					</div>
				</div>
			</form>
			</div>
		</div>
	</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/hui/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/layer/2.4/layui.all.js"></script>
<script type="text/javascript" src="/layer/formSelects/formSelects-v4.js" ></script>
<script type="text/javascript" src="/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="/jquery.validation/1.14.0/messages_zh.js"></script> 
<script>
var table;
var treeObj;
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	})
	$("#areaForm").validate({
		rules:{
			add_name:{
				required:true,
				maxlength:16
			},
			areaType:{
				required:true,
			},
		
		},
		messages: {
	      add_name:{
	        required:"请输入区域名称",
	        maxlength:"区域名称最长16位"
	      },
	      areaType:{
	        required:"请选择区域类型",
	      },
      }
	});
});
function zTreeOnClick(event, treeId, treeNode) {
	app.selectNode=treeNode;
	app.search.model.areaId=treeNode.id;
	app.searchData();
};
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
	var treeObj = $.fn.zTree.getZTreeObj("deptTree");
	var node= treeObj.getNodeByParam("id",treeId, null);
	treeObj.selectNode(node);
}
function filter(treeId, parentNode, childNodes) {
	var result=null;
	if(childNodes.status=='SUCCESS'){
		if(childNodes.data.length>0){
			result =childNodes.data;
		}
	}
	if (!result) return null;
	for (var i=0, l=result.length; i<l; i++) {
		result[i].name = result[i].name.replace(/\.n/g, '.');
	}
	return result;
}
var app = new Vue({
  el: '#app',
  data: {
  	treeData: [],
	index:0,
	selectNode:{},
	selectArea:{
		parent:{},
	},
	dictData:{},
  	page:{
    	pages:0,
        size:10,
        current:1,
        total:0
	},
	search:{
    	model:{
    		areaId:"",
    		areaName:""
    	}
    },
  	record:[]
  },
  methods:{
  	  initTree:function(){
  	  	var setting = {
			view: {
				selectedMulti: false
			},
			async: {
				enable: true,
				url:"/system/area/tree",
				type : "post",
				autoParam:["id"],
				dataFilter: filter
			},
			callback: {
				onClick : zTreeOnClick,
				onAsyncSuccess: zTreeOnAsyncSuccess
			}
		};
		$.fn.zTree.init($("#deptTree"), setting);
  	  },
  	  refreshNode:function(){
  	  	var zTree = $.fn.zTree.getZTreeObj("deptTree"),
		nodes = zTree.getSelectedNodes();
		if (nodes.length == 0) {
			layer.msg('请先选择一个父节点！');
			return false;
		}
		for (var i=0, l=nodes.length; i<l; i++) {
			if(!nodes[i].isParent){
				this.initTree();
			} else {
				zTree.reAsyncChildNodes(nodes[i].getNextNode(), 'refresh', false);
			}
		}
  	  },
  	  addArea:function(){
  	  	 var _this=this;
  	  	  if(_this.selectNode.id ==null){
	  	  	layer.msg('请先选择区域！');
	  	  	return false;
	  	  }
	  	  _this.selectArea={
	  	  	parent:{},
	  	  };
	  	   _this.selectArea.parent.name=_this.selectNode.name;
	  	   _this.selectArea.parentId=_this.selectNode.id;
		  var el = $("#areaDiv");
		  	//更换水表
		  	layer.open({
				  type: 1,
				  title:"新增区域",
				  skin: 'layui-layer-rim', //加上边框
				  area: ['460px', '300px'], //宽高
				  content: el,
				  btn:['保存'],
				  yes:function(index,layero){
				  		if(!$("#areaForm").valid()){
				  			layer.msg('请按要求完善信息！');
				  			return false;
				  		}
						var idx = layer.load(1, {shade:  [0.1,'#fff'] });
						var params = {};
						for(var key in _this.selectArea){
							params[key] = _this.selectArea[key];
						}
						params['status'] = 1;
						delete params['parent'];
						$.ajax({
							url:'/system/area/add',
							type:'post',
							data:params,
							dataType: "json",
							success: function(data){
								layer.close(idx);
								if (data.status=="SUCCESS") {
									app.searchData();
									app.refreshNode();
									layer.msg(data.message,function(){
										 layer.closeAll();
									});	
					        	} else {
					        		layer.msg(data.message);
					        	}
					        	
							},
							error:function(){
								layer.msg('网络异常');
								layer.close(idx);
							}
						});
				  }
			});
  	  },
 	  openUpdate:function(dept){
	  	var _this=this;
	  	 _this.selectArea=dept;
	  	var el = $("#areaDiv");
		  	//更换水表
		  	layer.open({
				  type: 1,
				  title:"修改机构",
				  skin: 'layui-layer-rim', //加上边框
				  area: ['460px', '300px'], //宽高
				  content: el,
				  btn:['修改'],
				  yes:function(index,layero){
				  		if(!$("#areaForm").valid()){
				  			layer.msg('请按要求完善信息！');
				  			return false;
				  		}
						var idx = layer.load(1, {shade:  [0.1,'#fff'] });
						var params = {};
						for(var key in _this.selectArea){
							params[key] = _this.selectArea[key];
						}
						delete params['parent'];
						$.ajax({
							url:'/system/area/modify',
							type:'post',
							data:params,
							dataType: "json",
							success: function(data){
								layer.close(idx);
								if (data.status=="SUCCESS") {
									app.searchData();
									layer.msg(data.message,function(){
										 layer.closeAll();
									});	
					        	} else {
					        		layer.msg(data.message);
					        	}
					        	
							},
							error:function(){
								layer.msg('网络异常');
								layer.close(idx);
							}
						});
				  		
				  }
			});
	  },
	  searchData:function(){
	  		this.page.current=1;
	  		this.loadList();
	  },
	  loadDict:function(){
	    this.index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
	  	$.ajax({
	        url:'/system/dict/laber',
	        type:'post',
	        data:{
	       	 	dictType:'sys_area_type'
	        },
	        dataType: "json",
	        success: function(data){
	        	if (data.status=="SUCCESS") {
	        		app.dictData=data.data
	        	} else {
	        		layer.msg(data.message);
	        	}
	        	layer.close(app.index);
	       } 
       })
	  },
	  loadList:function(){
		  this.index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
		  var params = {};
		  for(var key in this.page){
			  params[key] = this.page[key];
		  }
		  
		  for(var key in this.search.model){
			  params[key] = this.search.model[key];
		  }
		  $.ajax({
		        url:'/system/area/page',
		        type:'post',
		        data:params,
		        dataType: "json",
		        success: function(data){
		        	if (data.status=="SUCCESS") {
		        		app.record=data.data.records;
		        		app.page.total=data.data.total;
		        		app.page.pages=data.data.pages;
		        		app.page.current=data.data.current;
		        		app.pageList();
		        	} else {
		        		layer.msg(data.message);
		        	}
		        	layer.close(app.index);
		       },
		       error:function(){
					layer.msg('网络异常');
					layer.close(app.index);
				}  
		   });
	  },
	  pageList:function(){
		  laypage({
				cont : 'laypage', //容器。值支持id名、原生dom对象，jquery对象
				pages : this.page.pages==0?1:this.page.pages, //通过后台拿到的总页数
				curr : this.page.current,
				groups: 5, //连续显示分页数
		        skip: false, //是否开启跳页
				first: '首页', //若不显示，设置false即可
				last: '尾页', //若不显示，设置false即可
				prev: '上一页', //若不显示，设置false即可
				next: '下一页', //若不显示，设置false即可
				jump: function (e, first) { //触发分页后的回调
			      if (!first) { //一定要加此判断，否则初始时会无限刷新
			    	  	app.page.current = e.curr;
			    	  	app.page.pages = e.pages;
			    	  	app.loadList();
                      }
                  }
			});
	  },
  },
  created: function () {
  	    this.loadDict();
	   this.loadList();
  },
  mounted:function(){
	  this.initTree();
  }
})
</script>
</body>
</html>